<template>
  <el-dialog v-model="dialogVisible" title="Tips" width="60%">
    <el-row :gutter="10">
      <el-col :span="14">
        <el-card class="h-600px" header="筛选学校" shadow="never">
          <el-input v-model="input1" size="large" placeholder="请输入学校关键字" :suffix-icon="Search" />
          <div>
            <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="全选">
                <template #default="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="flex justify-center pt-60px">
            <el-pagination
              v-model:current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              background
              layout="sizes, prev, pager, next"
              :total="1000"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="h-600px" header="已选学校" shadow="never">
          <el-card v-for="item in multipleSelection" :key="item.id" class="mb-10px">
            <template #header>
              <div class="flex justify-between items-center">
                <h3>{{ item.name }}</h3>
                <el-icon size="26" class="cursor-pointer" color="red" @click="removeChoose(item)">
                  <Delete />
                </el-icon>
              </div>
            </template>
          </el-card>
        </el-card>
      </el-col>
    </el-row>
    <div class="text-center m-20px">
      <el-button type="primary" plain @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElTable } from 'element-plus'
const dialogVisible = ref(false)
const input1 = ref('')
const checkAll = ref(false)
const isIndeterminate = ref(false)
const checkedCities = ref([])
const tableData = ref([
  { value: '1', name: '小学1' },
  { value: '2', name: '小学2' },
  { value: '3', name: '小学3' },
  { value: '4', name: '小学4' },
  { value: '5', name: '小学5' }
])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const removeChoose = (val) => {
  multipleSelection.value = multipleSelection.value.filter((item) => {
    return item.value !== val.value
  })
  if (val) {
    multipleTableRef.value!.toggleRowSelection(val, undefined)
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const currentPage = ref(5)
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
}
const open = (val) => {
  dialogVisible.value = val
}
const handleCloseDialog = () => {
  dialogVisible.value = false
}
const emits = defineEmits(['schoolData'])
const submitForm = () => {
  dialogVisible.value = false
  emits('schoolData', multipleSelection.value)
}
defineExpose({ open, dialogVisible })
</script>
<style lang="scss" scoped></style>
